<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/user">用户管理</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-row style="padding-top: 10px">
      <el-form :inline="true" :model="state.queryParams">
        <el-form-item>
          <el-input v-model="state.queryParams.searchCode" @keyup.enter="query()" placeholder="搜索用户">
            <template #append>
              <el-button icon="el-icon-search" type="primary" @click="query()"></el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
    </el-row>

    <el-row>
      <el-table :data="state.table.rows" style="width: 100%;margin-bottom: 10px" v-loading="state.loading">
        <el-table-column
                prop="name"
                label="用户姓名">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="status"
                label="用户状态">
        </el-table-column>
        <el-table-column
                prop="created"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="updated"
                label="更新时间">
        </el-table-column>
        <el-table-column
                prop="op"
                label="操作">
          <template #default="scope">
            <el-button
                    size="mini"
                    type="warning"
                    @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
            :page-size="state.table.pageSize"
            :page-count="state.table.pageNumber"
            :total="state.table.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-row>

    <el-dialog
          :title="userModal.title"
          :visible.sync="userModal.show"
          width="50%">
      <el-form :model="userModal.data" ref="form" :rules="rules">
        <el-form-item label="用户姓名" label-width="100" prop="name">
          <el-input style="width: 100%" placeholder="用户姓名" v-model="userModal.data.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100" prop="phone">
          <el-input style="width: 100%" placeholder="手机号" v-model="userModal.data.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户状态" label-width="100" prop="status">
          <el-input style="width: 100%" placeholder="用户状态" v-model="userModal.data.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100" prop="pass">
          <el-input style="width: 100%" placeholder="密码" v-model="userModal.data.pass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="userModal.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
  import {User} from '@/util/resource';

  export default {
    name: "User",
    data() {
      return {
        state:{
          loading: false,
          table: {
            rows: [],
            total: 0,
            pageSize: 5,
            pageNumber: 0,
          },
          queryParams: {
            searchCode: "",
          },
        },
        rules: {
          id: [
            {required:  false, message: "用户ID不能为空", trigger: "blur"},
          ],
          name: [
            {required:  false, message: "用户姓名不能为空", trigger: "blur"},
            {
                validator: async (rule, value, callback) => {
                    if (this.userModal._data.name === value) {
                        return callback()
                    }
                    let res = await User.exists("name", value)
                    if (res.data.valid) {
                        return callback(new Error('用户姓名已存在'))
                    } else {
                        return callback()
                    }
                }, trigger: 'blur'
            }
          ],
          phone: [
            {required:  true, message: "手机号不能为空", trigger: "blur"},
          ],
          status: [
            {required:  false, message: "用户状态不能为空", trigger: "blur"},
          ],
          pass: [
            {required:  true, message: "密码不能为空", trigger: "blur"},
          ],
          created: [
            {required:  true, message: "创建时间不能为空", trigger: "blur"},
          ],
          updated: [
            {required:  true, message: "更新时间不能为空", trigger: "blur"},
          ],
        },
        userModal: {
          show: false,
          title: "",
          data: {},
          _data: {},
          isAdd: false,
          loading: false
        },
      }
    },
    created() {
      this.query()
    },
    methods: {
      handleSizeChange(val) {
        this.query(val)
      },
      handleCurrentChange(val) {
        this.query(undefined, val)
      },
      async query(pageSize, pageNumber) {
        this.state.queryParams.name = this.state.queryParams.searchCode
        this.state.queryParams.status = this.state.queryParams.searchCode
        if (pageSize) {
          this.state.table.pageSize = pageSize
        }
        if (pageNumber) {
          this.state.table.pageNumber = pageNumber
        }
        await User.paging(this.state)
      },
      async handleDelete(index, row) {
        this.$confirm('是否刪除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await User.del(row.id)
          if (res.data.success) {
            this.$message.success('删除成功');
            await this.query()
          } else {
            this.$message.error('删除失败');
          }
        }).catch(() => {
        })
      },
      handleAdd() {
        this.userModal.show = true
        this.userModal.title = "新增用户"
        this.userModal.data = {}
        this.userModal._data = {}
        this.userModal.isAdd = true
      },
      handleEdit(index, row) {
        this.userModal.show = true
        this.userModal.title = "编辑用户"
        this.userModal.data = {...row}
        this.userModal._data = {...row}
        this.userModal.isAdd = false
      },
      handleSave() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.userModal.loading = true
            let res = await User.save(this.userModal.data, this.userModal.isAdd ? "post" : "put")
            if (res.data.success) {
              this.$message.success('保存成功!')
              await this.query()
            } else {
              this.$message.error('保存失败!')
            }
            this.userModal.loading = false
            this.userModal.show = false
          }
        })
      },
    }
  }
</script>

<style scoped>
</style>
